<template>
  <div class="stateViewContainer">
    <div class="stateViewBg"></div>
    <div class="items">
      <div class="item">
        <div class="leftItem" :style="getLeftItemStyle">
          <div class="leftItemTitle" :style="getFontSize">
            {{ this.leftState }}
          </div>
        </div>
      </div>
      <div class="item">
        <div class="centerItem">
          <div class="centerItemTop">
            <div class="value">{{ this.centerValue }}</div>
            <div class="unit">{{ this.centerUnit }}</div>
          </div>
          <div class="centerItemBottom">
            <div class="centerDesc">{{ this.centerDesc }}</div>
          </div>
        </div>
      </div>
      <div class="item" @click="clickPower">
        <div
          class="rightItem"
          :style="getRightItemStyle"
          v-show="this.showPowerBtn || this.power"
        >
          <img class="rightItemImg" :src="getStatePowerImg" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import "../../assets/css/index.css";
import {
  WIDTH_PHONE,
  PHONE_RATIO,
  WIDTH_SPREADED,
  SPREADED_RATIO,
  WIDTH_PAD_PORTRAIT,
  PAD_PORTRAIT_RATIO,
  WIDTH_PAD_LANDSCAPE,
  PAD_LANDSCAPE_RATIO,
  WIDTH_STANDARD,
  SPREADED_SCREEN_RATIO,
  selectWidth,
  flexibleWidth,
  flexibleHeight,
  screenDpr,
  screenType,
  screenDescription,
  isIOS,
  isSpreadOn,
  screenSize,
  getSecondPageMarginStyle,
  getSecondPageStyle,
  getDialogFlexAlign,
  getDialogStyle,
  getSingleButtonStyle,
  setScreenResizeListener,
  itemWidth,
} from "../../assets/js/flexible.js";
export default {
  name: "StateView",
  props: {
    deviceTypePro: {
      type: Number,
      default: 1,
    },
    darkModePro: {
      type: String,
      default: "light",
    },
    languagePro: {
      type: String,
      default: "zh",
    },
    powerPro: {
      type: Boolean,
      defautl: false,
    },
    leftStatePro: {
      type: String,
      default: "待机",
    },
    centerValuePro: {
      type: String,
      default: "",
    },
    centerUnitPro: {
      type: String,
      default: "",
    },
    centerDescPro: {
      type: String,
      default: "",
    },
    showPowerBtnPro: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      power: false,
      language: "zh",
      deviceType: 1,
      leftState: "待机",
      centerValue: "",
      centerUnit: "",
      centerDesc: "",
      showPowerBtn: true,
    };
  },
  mounted() {
    this.deviceType = this.deviceTypePro;
    this.darkMode = this.darkModePro;
    this.language = this.languagePro;
    this.power = this.powerPro;
    this.leftState = this.leftStatePro;
    this.centerValue = this.centerValuePro;
    this.centerUnit = this.centerUnitPro;
    this.centerDesc = this.centerDescPro;
    this.showPowerBtn = this.showPowerBtnPro;
  },
  watch: {
    deviceTypePro(newVal) {
      this.deviceType = newVal;
    },
    darkModePro(newVal) {
      this.darkMode = newVal;
    },
    languagePro(newVal) {
      this.language = newVal;
    },
    powerPro(newVal) {
      this.power = newVal;
    },
    leftStatePro(newVal) {
      this.leftState = newVal;
    },
    centerValuePro(newVal) {
      this.centerValue = newVal;
    },
    centerUnitPro(newVal) {
      this.centerUnit = newVal;
    },
    centerDescPro(newVal) {
      this.centerDesc = newVal;
    },
    showPowerBtnPro(newVal) {
      this.showPowerBtn = newVal;
    },
  },
  computed: {
    getFontSize() {
      if (this.language.indexOf("en") != -1) {
        return { fontSize: screenSize(14) + "px" };
      } else {
        return { fontSize: screenSize(18) + "px" };
      }
    },
    getLeftItemStyle() {
      switch (this.deviceType) {
        case 1: //android手机
          // console.log("StateView: 手机左侧样式");
          return {
            justifyContent: "flex-start",
            marginLeft: screenSize(16) + "px",
          };
        case 2: //android Pad竖屏
          return { justifyContent: "center", marginLeft: 0 + "px" };
        case 3: //android Pad横屏
          return {
            justifyContent: "flex-start",
            marginLeft: screenSize(16) + "px",
          };
        case 4: //android 折叠屏
          console.log("StateView: 折叠屏左侧样式");
          return { justifyContent: "center", marginLeft: 0 + "px" };
        case 101: //iPhone
          return {
            justifyContent: "flex-start",
            marginLeft: screenSize(16) + "px",
          };
        case 102: //iPad
          return { justifyContent: "center", marginLeft: 0 + "px" };
        default:
          return {
            justifyContent: "flex-start",
            marginLeft: screenSize(16) + "px",
          };
      }
    },
    getRightItemStyle() {
      switch (this.deviceType) {
        case 1: //android手机
          // console.log("StateView: 手机右侧样式");
          return {
            justifyContent: "flex-end",
            marginRight: screenSize(16) + "px",
          };
        case 2: //android Pad竖屏
          return { justifyContent: "center", marginRight: 0 + "px" };
        case 3: //android Pad横屏
          return {
            justifyContent: "flex-end",
            marginRight: screenSize(16) + "px",
          };
        case 4: //android 折叠屏
          // console.log("StateView: 折叠屏右侧样式");
          return { justifyContent: "center", marginRight: 0 + "px" };
        case 101: //iPhone
          return {
            justifyContent: "flex-end",
            marginRight: screenSize(16) + "px",
          };
        case 102: //iPad
          return { justifyContent: "center", marginRight: 0 + "px" };
        default:
          return {
            justifyContent: "flex-end",
            marginRight: screenSize(16) + "px",
          };
      }
    },
    getLeftRightItemClass() {
      switch (this.deviceType) {
        case 1: //android手机
          return "rightItem";
        case 2: //android Pad竖屏
          return "rightItemForPad";
        case 3: //android Pad横屏
          return "rightItem";
        case 4: //android 折叠屏
          return "rightItemForPad";
        case 101: //iPhone
          return "rightItem";
        case 102: //iPad
          return "rightItemForPad";
        default:
          return "rightItem";
      }
    },
    getStatePowerImg() {
      if (this.power) {
        if (this.darkMode === "light") {
          return require("../../assets/img/light/ic_power_on.png");
        } else {
          return require("../../assets/img/dark/ic_power_on_dark.png");
        }
      } else {
        return require("../../assets/img/light/ic_power_off.png");
      }
    },
  },

  methods: {
    clickPower() {
      if (this.showPowerBtn) {
        this.$emit("clickPower", !this.power);
      } else {
        if (this.power) {
          this.$emit("clickPower", !this.power);
        }
      }
    },
  },
};
</script>
<style scoped>
.stateViewContainer {
  position: relative;
  width: 100%;
  height: 88px;
}

.stateViewContainer .stateViewBg {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  /* background: #ff0000; */
  background-color: var(--current-card-background-color);
}

.stateViewContainer .items {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  background: "rgba(0,0,0,0)";
}

.stateViewContainer .items .item {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.stateViewContainer .items .item .leftItem {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.stateViewContainer .items .item .leftItemTitle {
  color: var(--current-primary-color);
}

.stateViewContainer .items .item .rightItem {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.stateViewContainer .items .item .rightItem .rightItemImg {
  width: 48px;
  height: 48px;
}

.stateViewContainer .items .item .centerItem {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.stateViewContainer .items .item .centerItem .centerItemTop {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
}

.stateViewContainer .items .item .centerItem .centerItemTop .value {
  font-size: 24px;
  color: var(--current-primary-color);
}

.stateViewContainer .items .item .centerItem .centerItemTop .unit {
  margin-left: 2px;
  font-size: 12px;
  color: var(--current-second-title-color);
}

.stateViewContainer .items .item .centerItem .centerItemBottom {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.stateViewContainer .items .item .centerItem .centerItemBottom .centerDesc {
  margin-top: 2px;
  font-size: 12px;
  color: var(--current-second-title-color);
}
</style>
